<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Sam
 * @Date: 2022-04-07 20:18:30
 * @LastEditors: Sam
 * @LastEditTime: 2022-10-13 18:29:25
-->
<template>
    <div class="app-container">
        <el-card>
            <div slot="header" class="clearfix">
                <span>优惠券模板列表</span>
            </div>
             <div class="filter-container">
                <el-input v-model="listQuery.title" placeholder="请输入标题" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />

                    <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                    {{ '搜索' }}
                    </el-button>
                    <el-button v-waves :disabled="!checkPermission(['marketing.coupon_template_add'])"  class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                    {{ "添加" }}
                </el-button>
            </div>
             <el-table
                v-loading="listLoading"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%"
                size="mini"
                >  
                 <!-- <el-table-column align="center" type="selection" width="55"> 
                </el-table-column> --> 
            <el-table-column  align="center" label="编号" prop="id">
            </el-table-column>
            <el-table-column  align="center" label="标题">
                <template slot-scope="scope">
                    <span>{{ scope.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="优惠券面值">
                <template slot-scope="scope">
                    <span>{{ scope.row.coupon_price }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="最低消费">
                <template slot-scope="scope">
                    <span>{{ scope.row.use_min_price }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="效期限（天）">
                <template slot-scope="scope">
                    <span>{{ scope.row.coupon_time }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="排序">
                <template slot-scope="scope">
                    <span>{{ scope.row.sort }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="状态">
                <template slot-scope="scope">
                      <el-tag   v-if="scope.row.status == '1'" type="success" size="mini">
                    开 
                    </el-tag>
                    <el-tag   v-else type="danger" size="mini">
                     关 
                    </el-tag>
                </template>
            </el-table-column>

   
                <el-table-column align="center" width="280" :label="'操作'">
                <template slot-scope="scope">
                    
                    <el-button v-waves v-permission="['marketing.coupon_template_edit']"  type="primary"  size='mini' icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">
                        {{ "编辑" }}
                    </el-button>
                    <el-button v-waves v-permission="['marketing.coupon_template_del']"  type="danger" :destroy-on-close="true" size='mini' icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">
                            {{ "删除" }}
                    </el-button>
                      <el-button v-waves v-permission="['marketing.coupon_template_issue']"  type="info" :destroy-on-close="true" size='mini' icon="el-icon-share" @click="handleIssue(scope.$index, scope.row)">
                            {{ "发布" }}
                    </el-button>
                </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page"  :limit.sync="listQuery.limit" @pagination="getList" />
        </el-card>
 
           <el-dialog :title="'编辑'" :visible.sync="edit.dialogVisible" @close="getList" :close-on-click-modal=false>
            <edit :goods="goods" :category="category" :item="edit" />
         </el-dialog>
        <el-dialog :title="'添加'" :visible.sync="create.dialogVisible" @close="getList"  :close-on-click-modal=false>
            <create :goods="goods" :category="category" :item="create" />
        </el-dialog>
        <el-dialog :title="'发布'" :visible.sync="issue.dialogVisible" @close="getList" :close-on-click-modal = false> 
            <el-form  :model="issue.form"  :rule="issue.rule" ref="issue_form" label-width="100px">
                   <el-form-item  label="优惠券">
                        <el-input v-model.trim="issue.form.title" disabled />
                   </el-form-item>
                    <el-form-item  label="领取开始时间">
                        <el-date-picker type="date"  value-format="yyyy-MM-dd" placeholder="请选择日期" v-model="issue.form.start_time"></el-date-picker>
                   </el-form-item>
                   <el-form-item  label="领取截止时间">
                        <el-date-picker type="date"  value-format="yyyy-MM-dd" placeholder="请选择日期" v-model="issue.form.end_time"></el-date-picker>
                   </el-form-item>
                   <el-form-item  label="是否限量">
                          <el-radio v-model="issue.form.is_permanent" :label="0">限量</el-radio>
                          <el-radio  v-model="issue.form.is_permanent" :label="1">不限量</el-radio>
                   </el-form-item>
                   <el-form-item  label="发布数量" v-if="issue.form.is_permanent == 0">
                        <el-input-number  :min="1"  v-model.trim="issue.form.total_count" ></el-input-number>
                   </el-form-item>
                   <el-form-item  label="消费满赠">
                          <el-radio v-model="issue.form.is_full_give" :label="0">关闭</el-radio>
                          <el-radio  v-model="issue.form.is_full_give" :label="1">开启</el-radio>
                   </el-form-item>
                   <el-form-item  label="满赠金额" v-if="issue.form.is_full_give == 1">
                        <el-input  v-model.trim="issue.form.full_reduction" ></el-input>
                        <p>消费金额达到指定金额才会赠送优惠券</p>
                   </el-form-item>
                    <el-form-item label="状态">
                        <el-switch :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭" v-model="issue.form.status"></el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="issue.dialogVisible = false">取 消</el-button>
                    <el-button type="primary" :disabled="$store.state.settings.ajaxButton" @click="submitIssue('issue_form')">提交</el-button>
                    
                </div>
        </el-dialog>
    </div>
</template>
<style scoped>
    .import {
        display: inline-block;
        margin-left: 5px;
    }
</style>
<script>
    import {export_excell} from '@/api/export_excell' // 导出
    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { list, detail, del,issue } from '@/api/coupontemplate' // api接口
    import Create from './components/create' // 添加组件
    import Edit from './components/edit' // 编辑组件
    import { parseTime } from '@/utils' // 时间格式化函数
    import { getToken } from '@/utils/auth' // 获取token
    import Pagination from '@/components/Pagination' // 分页组件
    export default{
        name: 'coupontemplateIndex',
        components: { Pagination,Create,Edit }, // 引入组件
        filters: {
            parseTime // 时间过滤器
        },
        directives: { waves, permission }, // 引入指令
          data() {
            return {
             headerObj: {
                'Authorization': 'Bearer ' + getToken()
            },
            category:[],
            goods:[],
            list: null, // 列表数据
            total: 0, // 总条数
            select_ids : [], // 选中的id集合
            listLoading: true, //加载loadig
            listQuery: { //列表查询参数
                page: 1,
                limit: 10
            },
            create: { // 新增
                dialogVisible: false
            },
 
            issue:{
                dialogVisible:false,
                rule:{
                    start_time: [ 
                        { required: true, message: "请输入开始时间", trigger: "blur" }
                    ],
                    end_time: [ 
                        { required: true, message: "请输入结束时间", trigger: "blur" }
                    ],  
                },
                form:{
                    'is_permanent' :1,
                    'is_full_give' :0,
                    'total_count' : 0,
                    'full_reduction' :0,
                    'status' :1
                } 
            },
            edit: { // 编辑
                dialogVisible: false,
                id: ''
            }
            }
        },
          created() {
            this.getList()
        },
        methods: {

            submitIssue(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                    issue(this.issue.form).then(res => {
                        this.$message.success('发布成功')
                        this.issue.dialogVisible = false

                    })
                })
            },
            checkPermission, // 权限判断函数
            handleFilter() { // 查询
                this.listQuery.page = 1
                this.getList()
            },
            handleCreate() { // 新增对话框显示
              this.create.dialogVisible = true
            },
            handleEdit(index, row) { // 编辑对话框显示
              this.edit.dialogVisible = true
              this.edit.id = row.id
            },
            handleIssue(index, row) { // 发布
                this.issue.dialogVisible = true
                detail(row.id).then(res => {
                    this.issue.form.id = row.id
                    this.$set(this.issue.form, 'title',res.data.title)
                })
            },
            handleDelete(index, row) { // 删除
                    const thiz = this
                    this.$confirm('确认要删除吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        del(row.id).then(() => {
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1500,
                            onClose() {
                                thiz.list.splice(index, 1)
                            }
                        })
                        })
                    }).catch(() => {

                    })
            },

            getList() { // 获取列表
                this.listLoading = true
                list(this.listQuery).then(response => {
                        this.list = response.data.data
                        this.total = response.data.total
                        this.category = response.data.category
                        this.goods  = response.data.goods
                        this.listLoading = false
                    })
                },
            }
    }
</script>

